<template>
  <el-row type="flex">
    <el-col :span="12" class="right">
      <img src="@/assets/img/login_img.png" class="logo" />
    </el-col>
    <el-col :span="12">
      <el-card class="box-card">
        <img class="r-logo" src="@/assets/img/login_logo.png" />
        <p class="title">电商后台管理系统</p>
        <el-form :model="user" :rules="$rules.user" ref="userForm" status-icon>
          <el-form-item prop="username">
            <el-input
              placeholder="请输入用户名"
              prefix-icon="el-icon-user"
              v-model="user.username"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              placeholder="请输入密码"
              prefix-icon="el-icon-unlock"
              show-password
              v-model="user.password"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="loginBtn" type="primary" @click="doLogin()"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>
  </el-row>
</template>
<script>
export default {
  data() {
    return {
      user: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    async doLogin() {
      try {
        await this.$refs.userForm.validate();

        let data = await this.$api.userLogin(this.user);
        if (data == "error") return;
        
        this.$store.dispatch("setLoginUser", data);

        this.$router.push({
          name: "home",
        });
      } catch (error) {
        console.log("校验失败", error);
      }
    },
  },
};
</script>


<style lang="less" scoped>
.el-row {
  height: 100%;
  background-color: #909399;
}
.el-col {
  align-self: center;
  padding-left: 60px;
}
.el-col .logo {
  width: 450px;
}
.el-col .box-card {
  position: relative;
  width: 400px;
  height: 340px;
  text-align: center;
  padding: 40px;
  padding-top: 50px;
  box-sizing: border-box;
  overflow: unset;
  @wh: 140px;
  .r-logo {
    position: absolute;
    background-color: white;
    width: @wh;
    top: -50px;
    border-radius: 50%;
    padding: (@wh / 20);
    box-sizing: border-box;
    border: 6px solid #909399;
    top: (-@wh / 2);
    left: 50%;
    transform: translate((-@wh / 2), 0);
  }
}
.el-col .box-card .title {
  margin-bottom: 25px;
}
.el-col .box-card .loginBtn {
  width: 100%;
}
.el-col.right {
  text-align: right;
  padding-left: 0px;
  padding-right: 60px;
}
</style>